<!-- 最近事件分析 -->
<template>
  <div class="wrap">
    <span class="title">近{{prevenData.EventLogDays}}日事件分析</span>
    <el-col :xs="24" :sm="24" :lg="24">
      <el-table stripe :data="tableData" border style="width: 100%; margin-top: 15px;">
        <el-table-column label="序号" width="60" type="index"
          :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
        <el-table-column prop="TransTime" label="发送时间" width="160" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DeviceName" show-overflow-tooltip label="发生资产" width="160">
        </el-table-column>
        <el-table-column prop="EventLevel" label="严重等级" show-overflow-tooltip width="80">
          <template slot-scope="{row}">
            <span style="color:#F56C6C" v-show="row.EventLevel == '1'">紧急</span>
            <span style="color:#E6A23C" v-show="row.EventLevel == '2'">重要</span>
            <span style="color:#909399" v-show="row.EventLevel == '3'">默认</span>
            <span style="color:#409EFF" v-show="row.EventLevel == '4'">普通</span>
            <span style="color:#67C23A" v-show="row.EventLevel == '5'">告知</span>
          </template>
        </el-table-column>
        <el-table-column prop="Descp" show-overflow-tooltip label="描述信息">
        </el-table-column>
      </el-table>
    </el-col>
  </div>
</template>

<script>
import { connrequest2 } from "@/api/firstPage";
import { parseTime } from '@/utils/index.js'

export default {
  data() {
    return {
      listTime: [{ 'StartTime': '', 'EndTime': '' }],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      eventList: [],
    }
  },
  props: {
    prevenData: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  watch: {
    prevenData: {
      deep: true,
      handler(val) {
        this.prevenData = val
        this.getData()
      }
    }
  },
  methods: {
    getTimeList(i) {
      var today = new Date();
      this.listTime[0].StartTime = formatDate(today, i, true)
      this.listTime[0].EndTime = formatDate(today, 0, false)
      function formatDate(date, daysToAdd, isStart) {
        var newDate = new Date(date);
        newDate.setDate(date.getDate() - daysToAdd);
        var year = newDate.getFullYear();
        var month = String(newDate.getMonth() + 1).padStart(2, '0');
        var day = String(newDate.getDate()).padStart(2, '0');
        var hours = isStart ? '00' : '23';
        var minutes = isStart ? '00' : '59';
        var seconds = isStart ? '00' : '59';
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      }
    },
    async getData() {
      this.pageSize = this.prevenData.EventLogTotal
      this.getTimeList(this.prevenData.EventLogDays)
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.listTime[0].StartTime,
          EndTime: this.listTime[0].EndTime,
          Level: this.prevenData.EventLevel,
        }
      }
      const res = await connrequest2('GetEventLog', data);
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        return item
      })
      this.tableData = res.Data
    },
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex; /* 使用弹性布局 */
  flex-direction: column; /* 垂直排列子元素 */
  height: calc(100% - 16px); /* 继承父组件高度 */
  min-height: 100px; /* 最小高度以确保内容可见 */
  background: #fff; /* 背景色为白色 */
  box-sizing: border-box; /* 确保边距不影响高度 */
}

.title {
  flex-shrink: 0; /* 防止标题缩小 */
}

.el-col {
  flex: 1; /* 占据剩余高度 */
  display: flex; /* 确保子元素自适应 */
  flex-direction: column; /* 垂直排列 */
}

.el-table {
  flex: 1; /* 表格占据全部可用高度 */
  width: 100%; /* 宽度填满容器 */
  margin-top: 15px; /* 上边距 */
}
</style>